<template>
	<view class="page">
		<scroll-view class="m-scrollBox" scroll-y="true">
			<block v-if="(UserCoupon.length>0)">
				<view class="m-coupon-item" @click="changecoupon" :data-id="(item.redemption_id)" :data-item_id="(item.item_id)" v-for="(item, index) in UserCoupon" :key="index">
					<image lazy-load src="https://suteshop-1307606507.file.myqcloud.com/xcxfile/appicon/images/coupon_red.png" class="item-bg"></image>
					<view class="coupon-item-left">
						<view class="item-left-top">{{__('￥')}}<label style="font-size:64rpx">{{item.redemption_price}}</label></view>
					</view>
					<view class="coupon-item-right">
						<view class="item-title item-title-black">{{item.activity_title}}</view>
						<view class="item-middle">
							<label class="item-time">{{__('到期时间:')}}{{item.activity_endtime}}</label>
						</view>

						<view class="item-desc"></view>
					</view>
					<image lazy-load src="/static/images/checked.png" class="image-checked" v-if="(item.redemption_id == id_checked)" />
				</view>

				<button class="u-btn u-btn-default" style="margin-top:30rpx;" @click="uesnothing">{{__('不使用提货券')}}</button>
			</block>
			<view class="m-nullcontent" v-else>
				<view class="m-nullpage-middle">
					<label class="iconfont icon-meiyougengduo"></label>
					<view class="m-null-tip">
						<text>{{__('亲~什么都没有')}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import $ from "../../helpers/util";
	import {
		mapState,
		mapMutations
	} from 'vuex'


	export default {
		data() {
			return {
				options: {},
				CartSelect: [],
				UserCoupon: [],
				id_checked: 0,
				IsUseCoupon: 1
			};
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title: this.__('使用提货券')
			});
			options.val = decodeURIComponent(options.val)
			var redemption_items = $.parseJSON(options.val);
			this.setData({
				UserCoupon: redemption_items,
				id_checked: options.redemption_id,
				options: options,
			})

			// if(options.ifcart)
			// {
			// 	this.getselect()
			// }

		},
		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),

			// getselect:function(){
			// 	var that = this;
			// 	var params = {};
			// 	that.$.request({
			// 		url: this.Config.URL.cart.getselect,
			// 		data: params,
			// 		success: function(data, status, msg, code) {
			// 			var isSelect = false;
			// 			if(status == 200)
			// 			{
			// 				if (data['items'].length > 0)
			// 				{
			// 					that.setData({
			// 						CartSelect:data['items']
			// 					})
			// 				}
			// 			}
			// 			else
			// 			{
			// 				//that.$.confirm(msg);
			// 			}
			// 		}
			// 	})
			// },
			changecoupon: function(e) {
				var that = this;
				var item_id = parseInt(e.currentTarget.dataset.item_id);
				this.setData({
					IsUseCoupon: 0,
					id_checked: parseInt(e.currentTarget.dataset.id)
				});
				this.goback();
				return;
			},
			uesnothing: function() {
				var that = this;

				this.setData({
					IsUseCoupon: 0,
					id_checked: 0
				});

				this.goback();
			},
			goback: function() {
				var that = this;
				$.navigateBack(1, function() {
					var params = that.options;

					params.redemption_id = that.id_checked;
					that.notice.postNotificationName("RefreshRedemption", params)
				})
			}
		}
	}
</script>



<style lang="scss">
	@import "../../styles/_variables";

	.m-scrollBox {
		padding: 10rpx 10rpx 0rpx;
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
	}

	.m-coupon-item {
		margin: 10rpx 10rpx 20rpx;
		position: relative;
		width: 100%;
		height: 190rpx;
	}

	.m-coupon-item .item-bg {
		width: 710rpx;
		height: 190rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.coupon-item-left {
		position: absolute;
		color: white;
		text-align: center;
		width: 250rpx;
		padding: 25rpx 0rpx;
	}

	.item-left-top {
		line-height: 100rpx;
		font-weight: bold;
	}

	.item-left-top label {
		font-size: 90rpx;
	}

	.item-left-bottom {
		font-size: 24rpx;
	}

	.coupon-item-right {
		position: absolute;
		left: 250rpx;
		top: 0;
		width: 420rpx;
		height: 170rpx;
		padding: 10rpx 20rpx;
		font-size: 22rpx;
		color: gray;
	}

	.item-title {
		line-height: 40rpx;
		font-size: 28rpx;
		height: 80rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.item-title-black {
		color: #333;
	}

	.item-middle {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
	}

	.item-usenow {
		font-size: 24rpx;
		border: 1px solid $default-skin-bg;
		float: right;
		color: $default-skin-bg;
		border-radius: 40rpx;
		padding: 0 15rpx;
		position: relative;
		top: -8rpx;
		line-height: 40rpx;
	}

	.item-desc {
		height: 50rpx;
		line-height: 50rpx;
		margin-top: 5rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.image-checked {
		position: absolute;
		right: 20rpx;
		bottom: 0;
		width: 50rpx;
		height: 50rpx;
	}
</style>